// 导入reset css
@import 'reset';
@import 'swiper';
// 定义变量
@rem: 1080/16rem;

// 全局设置
html,body,.app{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.app{
  background-color: #eee;
}
// 头部
#header{
  background-color: #232323;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  .header-top{
    height: 135/@rem;
    .logo{
      float: left;
      padding: 26/@rem 17/@rem 21/@rem;
      img{
        display: block;
        width: 240/@rem;
        height: 88/@rem;
      }
    }
    .menu-btn{
      float: left;
      width: 129/@rem;
      height: 135/@rem;
      background-image: url('../img/menuBtn.png');
      background-repeat: no-repeat;
      background-size: 82/@rem 233/@rem;
      background-position: center 16/@rem;
      background-color: transparent;
      border: none;

      &.open{
        background-position: center -120/@rem;
      }
    }
    .btn-group{
      float: right;
      padding-top: 21/@rem;
      display: flex;
      .btn{
        width: 111/@rem;
        height: 78/@rem;
        line-height: 78/@rem;
        color: #ccc;
        text-align: center;
        font-size: 42/@rem;
        margin-right: 15/@rem;
        border: none;
        border-radius: 8/@rem;
        background-color: #690;

        &.btn-search{
          width: 130/@rem;
          height: 88/@rem;
          line-height: 88/@rem;
          color: #fff;
          margin-top: 3px;
          // margin-left: 30px;
          font-weight: bold;
          border-radius: 10/@rem;
        }
      }
    }
  }
  .search-form{
    height: 103/@rem;
    padding: 16/@rem;
    // form{
    //   display: flex;
    //   justify-content: space-between;
    // }
    input{
      box-sizing: border-box;
      width: 829/@rem;
      height: 103/@rem;
      background-color: #999;
      padding: 5/@rem 10/@rem;
      border: 1/@rem solid #5a5a5a;
      font-size: 41/@rem;
      border-radius: 15/@rem 0 0 15/@rem;
      color: #333;
      // 焦点伪类选择器
      &:focus{
        outline: none;
        background: #fff;
      }
    }

    button{
      box-sizing: border-box;
      width: 203/@rem;
      height: 103/@rem;
      border: none;
      background-color: #414040;
      color: #fff;
      font-size: 41/@rem;
      border-radius: 0 15/@rem 15/@rem 0;

      
    }
  }
  .menu-list{
    position: absolute;
    top: 135/@rem;
    left: 0;
    width: 100%;
    padding: 10/@rem 0;
    border-top: 1px solid #6a6a6a;
    background: rgba(0, 0, 0, .8);
    display: none;
    flex-flow: wrap;   //换行
    
    &.open{
      display: flex;
    }
    
    li {
      flex: none;
      width: 22.5%;
      height: 135/@rem;
      line-height: 135/@rem;
      font-size: 54/@rem;
      text-align: center;
      font-weight:bold;
      a{
        color: #fff;
      }
    }
  }
}
// 主体内容
#main{
  // 导航
  padding-top: 270/@rem;
  .nav{
    box-sizing: border-box;
    height: 199/@rem;
    padding: 31/@rem 0 14/@rem;
    position: relative;
    .nav-list{
      position: absolute;
      top: 31/@rem;
      left: 0;
      white-space: nowrap;
      font-size: 0;
      li{
        // 这里使用flex 内容不会被撑开  使用inline-block内容撑完后会换行  可以使用white-space:nowrap不换行
        display: inline-block;
        height: 129/@rem;
        line-height: 129/@rem;
        text-align: center;
        font-size: 67.5/@rem;
        padding: 0 38/@rem;

        a{
          color: #020202;
        }
        &.active{
          background: #690;
          a{
            color:#fff;
          }
        }
      }
    }
  }

  // tab选项卡
  .tab{
    width: 1046/@rem;
    background-color: #fff;
    margin: 0 auto;
    overflow: hidden;
    .tab-header{
      height: 135/@rem;
      line-height: 135/@rem;
      display: flex;
      justify-content: space-between;
      h2{
        font-size: 74/@rem;
        color: #000;
        font-weight: bold;
      }
      a{
        font-size: 40.5/@rem;
        color: #000;
      }
    }
    .tab-nav{
      width: 105/@rem;
      height: 105/@rem;
      display: flex;
      position: relative;
      a{
        flex: none;
        height: 105/@rem;
        width: 120/@rem;
        font-size: 44/@rem;
        text-align: center;
        color: #6b6b6b;
      }
      .active-border{
        position: absolute;
        width: 120/@rem;
        height: 9/@rem;
        background-color: #6f900d;
        left: 0;
        bottom: 9/@rem;
        transition: transform 0.5s; 
      }
    }
    .tab-content{
      display: flex;
      width: 300%;
      .tab-list{
        flex: none;
        display: flex;
        width: 33.33%;
        flex-wrap: wrap;
        li{
          flex: none;
          box-sizing: border-box;
          width: 506/@rem;
          margin: 8/@rem;
          padding: 5/@rem;
          font-size: 40/@rem;
          background-color: #efefef;
          a{
            color: #000;
          }
          img{
            width: 100%;
            display: block;
          }
          h3{
            // 强制不换行
            white-space: nowrap;
            overflow: hidden;
            // 给多出的文字设置省略号
            text-overflow: ellipsis;
          }
          .des{
            display: flex;
            .des-left{
              display: flex;
              .icon{
                width: 20px;
                height: 17px;
                background: url('../img/ice.png') no-repeat center 4px;
              }
            }
            .des-right{
              display: flex;
              .icon{
                width: 20px;
                height: 17px;
                background: url('../img/ice.png') no-repeat center -15px;
              }
            }
          }
        }
      }
      .tab-loading{
        flex: none;
        width: 33.33%;
        height: 101/@rem;
        background: url('../img/loading.gif') no-repeat center center;
        opacity: 0;
        transition: opacity 0.5s;
      }
    }
  }
}

 